<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

	<ui:debug />
	<f:metadata>
		<ui:insert name="metadata" />
	</f:metadata>
	
	<h:head>
		<meta charset="utf-8"/>
	    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	    <meta name="viewport" content="width=device-width, initial-scale=1"/>
	    <meta name="description" content=""/>
	    <meta name="author" content=""/>
		<title><ui:insert name="title" /></title>
		<h:outputStylesheet library="css" name="bootstrap.min.css"/>
	  	<h:outputStylesheet library="css" name="sb-admin.css"/>
	  	<h:outputStylesheet library="css" name="font-awesome.css"/>
	  	<h:outputScript library="script" name="bootstrap.min.js"/>
	</h:head>
	<f:view locale="#{languageBean.localeCode}">
	<h:body onload="statusDialog.hide();">
		<p:ajaxStatus onstart="statusDialog.show();"
			onsuccess="statusDialog.hide();" />
		<meta charset="utf-8"/>
		<div id="wrapper">

        <!-- Navigation -->
        <h:form id="topNavForm" prependId="false">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <p:link outcome="home" styleClass="navbar-brand" style="text-transform: uppercase">#{msg['com.home.template.logoAdmin']}</p:link>
            </div>
            <!-- Top Menu Items -->
            <ul class="nav navbar-right top-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> <b class="caret"></b></a>
                    <ul class="dropdown-menu message-dropdown">
                        <li class="message-preview">
                            <a href="#">
                                <div class="media">
                                    <span class="pull-left">
                                        <img class="media-object" src="http://placehold.it/50x50" alt=""/>
                                    </span>
                                    <div class="media-body">
                                        <h5 class="media-heading">
                                            <strong>#{accountBean.accountDto.userName}</strong>
                                        </h5>
                                        <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="message-preview">
                            <a href="#">
                                <div class="media">
                                    <span class="pull-left">
                                        <img class="media-object" src="http://placehold.it/50x50" alt=""/>
                                    </span>
                                    <div class="media-body">
                                        <h5 class="media-heading">
                                            <strong>John Smith</strong>
                                        </h5>
                                        <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="message-preview">
                            <a href="#">
                                <div class="media">
                                    <span class="pull-left">
                                        <img class="media-object" src="http://placehold.it/50x50" alt=""/>
                                    </span>
                                    <div class="media-body">
                                        <h5 class="media-heading">
                                            <strong>John Smith</strong>
                                        </h5>
                                        <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="message-footer">
                            <a href="#">Read All New Messages</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i> <b class="caret"></b></a>
                    <ul class="dropdown-menu alert-dropdown">
                        <li>
                            <a href="#">Alert Name <span class="label label-default">Alert Badge</span></a>
                        </li>
                        <li>
                            <a href="#">Alert Name <span class="label label-primary">Alert Badge</span></a>
                        </li>
                        <li>
                            <a href="#">Alert Name <span class="label label-success">Alert Badge</span></a>
                        </li>
                        <li>
                            <a href="#">Alert Name <span class="label label-info">Alert Badge</span></a>
                        </li>
                        <li>
                            <a href="#">Alert Name <span class="label label-warning">Alert Badge</span></a>
                        </li>
                        <li>
                            <a href="#">Alert Name <span class="label label-danger">Alert Badge</span></a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">View All</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> #{accountBean.userName} <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <p:link outcome="viewProfile"><i class="fa fa-fw fa-user"></i> #{msg['com.home.template.profile']}</p:link>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-fw fa-envelope"></i> #{msg['com.home.template.inbox']}</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-fw fa-gear"></i> #{msg['com.home.template.settings']}</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <p:commandLink ajax="false" action="#{accountBean.logout}"><i class="fa fa-fw fa-power-off"></i> #{msg['com.home.template.logout']}</p:commandLink>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav side-nav">
                    <li class="#{view.viewId eq '/admin/dashboard.xhtml' ? 'active' : ''}">
                       	<p:link outcome="home"><i class="fa fa-fw fa-dashboard"></i> #{msg['com.home.template.dashboard']}</p:link>
                    </li>
                    <li class="#{view.viewId eq '/admin/userManagement.xhtml' ? 'active' : ''}">
                        <p:link outcome="userManagement"><i class="fa fa-fw fa-user"></i> #{msg['com.home.template.userManagement']}</p:link>
                    </li>
                    <li class="#{view.viewId eq '/admin/movie.xhtml' ? 'active' : ''}">
                        <p:link outcome="movies"><i class="fa fa-fw fa-film"></i> #{msg['com.home.template.movies']}</p:link>
                    </li>
                    <li class="#{view.viewId eq '/admin/cinema.xhtml' ? 'active' : ''}">
                        <p:link outcome="cinema"><i class="fa fa-fw fa-university"></i> #{msg['com.home.template.cinema']}</p:link>
                    </li>
                    <li class="#{view.viewId eq '/admin/news.xhtml' ? 'active' : ''}">
                        <p:link outcome="news"><i class="fa fa-fw fa-newspaper-o"></i> #{msg['com.home.template.news']}</p:link>
                    </li>
                    <li>
                        <a href="bootstrap-grid.html"><i class="fa fa-fw fa-wrench"></i> Bootstrap Grid</a>
                    </li>
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Dropdown <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="demo" class="collapse">
                            <li>
                                <a href="#">Dropdown Item</a>
                            </li>
                            <li>
                                <a href="#">Dropdown Item</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="blank-page.html"><i class="fa fa-fw fa-file"></i> Blank Page</a>
                    </li>
                    <li>
                        <a href="index-rtl.html"><i class="fa fa-fw fa-dashboard"></i> RTL Dashboard</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </nav>
        </h:form>

        <div id="page-wrapper">

            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            <ui:insert name="titlePage" />
                            <small><ui:insert name="subHeading" /></small>
                        </h1>
                        <ol class="breadcrumb">
                        	<ui:insert name="breadcrumb" />
                        </ol>
                    </div>
                </div>
                <!-- /.row -->
				<div class="row">
                    <div class="col-lg-6">
                    	<ui:insert name="content" />
                    </div>
                 </div>
            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
		
		

		<p:dialog modal="true" widgetVar="statusDialog" showHeader="false"
			draggable="false" closable="false" resizable="false" visible="false"
			position="center" maximizable="false" minimizable="false">
			<p:graphicImage value="#{resource['images/ajax-loader.gif']}" />
		</p:dialog>
	</h:body>
	</f:view>
</html>
